<template>
  <div class="make">
    <Row :gutter="16">
      <i-table ref="table" border :content="self" :columns="columns" :data="drugsInfo"></i-table>
    </Row>
    <Row :gutter="16" style="margin-top:10px">
      <Select v-model="drug" filterable placeholder="请选择" @on-change="changeDrug">
        <Option v-for="item in drugs" :value="item.id" :key="item.id">{{ item.name }}</Option>
      </Select>
    </Row>
  </div>
</template>

<script>
import patient from "@/api/patientFile.js";
import hourse from "./../../api/hourse.js";
export default {
  name: "make",
  data() {
    return {
      self: this,
      drugsInfo: [],
      drugs: [],
      drug: "",
      columns: [
        {
          title: "商品名称",
          key: "name"
        },
        {
          title: "单位",
          key: "unit"
        },
        {
          title: "剂量",
          key: "dosage",
          render: (h, { row }) => {
            return h("Input", {
              props: { value: row.dosage },
              on: {
                "on-change": event => {
                  console.log(event, "");
                  this.drugsInfo.map(index => {
                    if (index.drugId == row.drugId) {
                      index.dosage = event.target.value;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "使用方法",
          key: "usage",
          render: (h, { row }) => {
            return h("Input", {
              props: { value: row.usage },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.drugId == row.drugId) {
                      index.usage = event.target.value;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "频次",
          key: "frequency",
          render: (h, { row }) => {
            return h("InputNumber", {
              props: { value: row.frequency },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.drugId == row.drugId) {
                      index.frequency = event;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "服用天数",
          key: "days",
          render: (h, { row }) => {
            return h("InputNumber", {
              props: { value: row.days },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.drugId == row.drugId) {
                      index.days = event;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "说明",
          key: "description",
          render: (h, { row }) => {
            return h("Input", {
              props: { value: row.description },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.drugId == row.drugId) {
                      index.description = event.target.value;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "数量",
          key: "num",
          render: (h, { row }) => {
            return h("InputNumber", {
              props: { value: row.num, max: row.maxNum },
              on: {
                "on-change": event => {
                  this.drugsInfo.map(index => {
                    if (index.drugId == row.drugId) {
                      index.num = event;
                    }
                  });
                }
              }
            });
          }
        },
        {
          title: "取药地点",
          key: "address"
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, { row }) => {
            return h(
              "Button",
              {
                props: { size: "small", type: "error" },
                on: {
                  click: () => {
                    this.drugsInfo = this.drugsInfo.filter(index => {
                      index.drugId == row.drugId ? false : true;
                    });
                  }
                }
              },
              [
                h("Icon", {
                  props: { type: "ios-trash" },
                  style: { marginRight: "3px" }
                }),
                h("span", "删除")
              ]
            );
          }
        }
      ]
    };
  },
  methods: {
    changeDrug(id) {
      hourse.drugSelect({ id }).then(({ data }) => {
        this.drugsInfo.push({
          drugId: data.id,
          name: data.name,
          maxNum: data.num,
          unit: data.unit,
          dosage: "",
          usage: "",
          frequency: 0,
          days: 0,
          description: "",
          num: 0,
          address: "本院"
        });
      });
    },
    submit(id) {
      patient
        .prescribe({ dossierId: id, list: this.drugsInfo })
        .then(data => {
          console.log(data, "");
          if (data.flag) {
            this.drugsInfo = [];
            this.$Message.success("开药成功！");
          } else {
            this.$Message.success("开药失败！");
            this.$emit("changeLoading", true);
          }
        });
    }
  },
  mounted() {
    hourse.drugQuery({ q: "" }).then(data => {
      this.drugs = data.data;
    });
  }
};
</script>

<style lang="less" scoped>
.make {
}
</style>
